import './App.css';
import React, { Component } from 'react'
// import { Link, Route } from 'react-router-dom'

// const C405 =()=>{
//     return <div>111111111111222222222222222223333333333333333331111111111111111</div>
// }

export default class Flex extends Component {

    constructor(props) {
        super(props)
        this.state = {
            directionClazz: 'direaction-1'
        }
        this.chnagDirection = this.chnagDirection.bind(this)
    }

    chnagDirection = (di) => {
        console.time('chnagDirection')
        let newDi = 'direaction-' + di
        this.setState({ directionClazz: newDi })
        console.timeEnd('chnagDirection')
    }

    render() {
        return (
            <div className="App">
                <div className={['flex-directions', this.state.directionClazz].join(' ')}>
                    <div><button onClick={() => this.chnagDirection(1)}>1</button></div>
                    <div><button onClick={() => this.chnagDirection(2)}>2</button></div>
                    <div><button onClick={() => this.chnagDirection(3)}>3</button></div>
                    <div><button onClick={() => this.chnagDirection(4)}>4</button></div>
                </div>
                
            </div>
        );
    }
}
